const pxToViewport = require("postcss-px-to-viewport");

const path = require("path");

const vw = pxToViewport({
   unitToConvert: "px", // 要转化的单位
   viewportWidth: 375, // UI设计稿的宽度 750
   unitPrecision: 6, // 转换后的精度，即小数点位数
   propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
   viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
   fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
   selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，
   minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
   mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
   replace: true, // 是否转换后直接更换属性值
   // exclude: [/node_modules/], 设置忽略文件，用正则做目录名匹配,设置忽略node_modules会导致测试时，Vant组件无法转换单位
   exclude: [],
   landscape: false, // 是否处理横屏情况
   landscapeUnit: "vw",
   landscapeWidth: 568,
});
module.exports = {
   devServer: {
      port: 8080,
   },
   webpack: {
      alias: {
         "@": path.resolve(__dirname, "src"),
      },
      configure: (webpackConfig: any) => {
         const oneOfRule = webpackConfig.module.rules.find((rule: any) => rule.oneOf);
         if (oneOfRule) {
            oneOfRule.oneOf.splice(0, 0, {
               test: /\.svg$/,
               include: path.resolve(__dirname, "src/icons"),
               use: [
                  {
                     loader: "svg-sprite-loader",
                     options: {
                        symbolId: "icon-[name]",
                     },
                  },
               ],
            });
         }
         return webpackConfig;
      },
   },
   style: {
      postcss: {
         mode: "extends",
         loaderOptions: {
            postcssOptions: {
               ident: "postcss",
               plugins: [vw],
            },
         },
      },
   },

};

export {};
